<style lang="less">
    @import './styles/to-do-list-item.less';
</style>

<template>
    <Row class="to-do-list-item">
        <Col span="2" class="height-100">
            <Row type="flex" justify="center" align="middle" class="height-100">
                <Checkbox v-model="thisTodoitem" @click.native="handleHasDid"></Checkbox>
            </Row>
        </Col>
        <Col span="6" class="height-100">
            <Row type="flex" justify="start" align="middle" class="height-100">
                <p class="to-do-list-item-text" @click="handleHasDid" :class="{hasDid: thisTodoitem}">{{ time }}</p>
            </Row>
        </Col>
        <Col span="6" class="height-100">
            <Row type="flex" justify="center" align="middle" class="height-100">
                <p class="to-do-list-item-text" @click="handleHasDid" :class="{hasDid: thisTodoitem}">{{ code }}</p>
            </Row>
        </Col>
        <Col span="10" class="height-100">
            <Row type="flex" justify="start" align="middle" class="height-100">
                <p class="to-do-list-item-text" @click="handleHasDid" :class="{hasDid: thisTodoitem}">{{ content }}</p>
            </Row>
        </Col>
    </Row>
</template>

<script>
export default {
    name: 'toDoListItem',
    data () {
        return {
            thisTodoitem: this.todoitem
        };
    },
    props: {
        id: Number,
        code: String,
        todoitem: Boolean,
        content: String,
        time: ''
    },
    methods: {
        handleHasDid () {
            this.thisTodoitem = !this.thisTodoitem;
            this.$emit('handleHasDid', this.id, this.thisTodoitem)
        }
    }
};
</script>